<style lang="less">
  @import "./settingManage.less";
</style>
<template>
  <div>
    <Card>
      <Layout>
        <Sider hide-trigger style="background: #fff;max-width: 220px;flex: 0 0 220px;">
          <Menu :active-name="currName" theme="light" width="auto" @on-select="currName=$event">
            <MenuItem name="oss">文件对象存储配置</MenuItem>
            <MenuItem name="sms">短信配置</MenuItem>
            <MenuItem name="email">邮件配置</MenuItem>
            <MenuItem name="vaptcha">Vaptcha验证码</MenuItem>
            <MenuItem name="notice">系统公告配置</MenuItem>
            <MenuItem name="other">其他配置</MenuItem>
          </Menu>
        </Sider>
        <Content :style="{padding: '8px 40px', minHeight: '550px', background: '#fff'}">
          <div v-show="currName=='oss'">
            <div class="setting-title">文件对象存储配置</div>
            <div style="display:flex;position:relative">
              <Form ref="ossForm" :model="oss" :label-width="110" label-position="left" :rules="ossValidate">
                <FormItem label="服务提供商" prop="serviceName">
                  <Select v-model="oss.serviceName" @on-change="changeOss" placeholder="请选择" style="width: 230px">
                    <Option value="LOCAL_OSS">本地服务器</Option>
                    <Option value="MINIO_OSS">MinIO</Option>
                    <Option value="QINIU_OSS">七牛云</Option>
                    <Option value="ALI_OSS">阿里云</Option>
                    <Option value="TENCENT_OSS">腾讯云</Option>
                  </Select>
                </FormItem>
                <div v-if="oss.serviceName!='LOCAL_OSS'">
                  <FormItem label="accessKey" prop="accessKey">
                    <Input type="text" v-model="oss.accessKey" placeholder="请输入accessKey" style="width: 380px"
                      :disabled="changeLoading" />
                  </FormItem>
                  <FormItem label="secretKey" prop="secretKey">
                    <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                      <Input class="input-see" type="text" v-model="oss.secretKey" :disabled="changeLoading"
                        :readonly="!changedOssSK" @on-click="seeSecret(oss.serviceName)" icon="ios-eye"
                        placeholder="请输入secretKey" style="width: 380px" />
                    </Tooltip>
                  </FormItem>
                  <FormItem v-if="oss.serviceName=='QINIU_OSS'" label="zone存储区域" prop="zone">
                    <Select v-model="oss.zone" placeholder="请选择存储区域" style="width: 380px" :disabled="changeLoading">
                      <Option :value="-1">自动判断</Option>
                      <Option :value="0">华东</Option>
                      <Option :value="1">华北</Option>
                      <Option :value="2">华南</Option>
                      <Option :value="3">北美</Option>
                      <Option :value="4">东南亚</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="bucket空间" prop="bucket">
                    <Input type="text" v-model="oss.bucket" placeholder="请输入bucket空间名" style="width: 380px"
                      :disabled="changeLoading" />
                  </FormItem>
                  <FormItem v-if="oss.serviceName=='TENCENT_OSS'" label="所属地域" prop="bucketRegion">
                    <Select v-model="oss.bucketRegion" placeholder="请选择或输入搜索" style="width: 380px" filterable transfer
                      :disabled="changeLoading">
                      <Option v-for="(item, i) in dictBucketRegions" :key="i" :value="item.value">{{item.title}}
                      </Option>
                    </Select>
                  </FormItem>
                  <FormItem label="endpoint域名" prop="endpoint" :error="errorMsg">
                    <Input type="text" v-model="oss.endpoint" :placeholder="endpointPH" style="width: 380px"
                      :disabled="changeLoading">
                    <Select v-model="oss.http" slot="prepend" style="width: 80px" prop="http">
                      <Option value="http://">http://</Option>
                      <Option value="https://">https://</Option>
                    </Select>
                    </Input>
                  </FormItem>
                </div>
                <div v-else>
                  <FormItem label="存储磁盘路径" prop="filePath" :error="errorMsg2">
                    <Input type="text" v-model="oss.filePath" placeholder="例如D:/upload" style="width: 380px"
                      :disabled="changeLoading" />
                  </FormItem>
                  <FormItem label="文件预览接口" prop="endpoint" :error="errorMsg">
                    <Input type="text" v-model="oss.endpoint" placeholder="请输入文件预览接口" style="width: 380px">
                    <Select v-model="oss.http" slot="prepend" style="width: 80px" prop="http" :disabled="changeLoading">
                      <Option value="http://">http://</Option>
                      <Option value="https://">https://</Option>
                    </Select>
                    </Input>
                  </FormItem>
                </div>
                <FormItem>
                  <Button type="primary" style="width: 100px;" :disabled="changeLoading" :loading="saveLoading"
                    @click="saveEditOss">保存并启用</Button>
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName=='sms'">
            <div class="setting-title">短信配置</div>
            <div style="display:flex;position:relative">
              <Form ref="smsForm" :model="sms" :label-width="110" label-position="left" :rules="smsValidate">
                <FormItem label="服务提供商" prop="serviceName">
                  <Select v-model="sms.serviceName" placeholder="请选择" style="width: 230px">
                    <Option value="ALI_SMS">阿里云</Option>
                  </Select>
                </FormItem>
                <FormItem label="accessKey" prop="accessKey">
                  <Input type="text" v-model="sms.accessKey" placeholder="请输入" style="width: 380px" />
                </FormItem>
                <FormItem label="secretKey" prop="secretKey">
                  <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                    <Input class="input-see" type="text" v-model="sms.secretKey" :readonly="!changedSmsSK"
                      @on-click="seeSecret(sms.serviceName)" icon="ios-eye" placeholder="请输入" style="width: 380px" />
                  </Tooltip>
                </FormItem>
                <FormItem label="短信签名" prop="signName">
                  <Input type="text" v-model="sms.signName" placeholder="请输入短信签名，例如XBoot" style="width: 380px" />
                </FormItem>
                <FormItem label="使用场景" prop="type">
                  <Select v-model="sms.type" @on-change="changeSmsType" placeholder="请选择" style="width: 380px">
                    <Option value="0">通用验证码</Option>
                    <Option value="1">注册</Option>
                    <Option value="2">登录</Option>
                    <Option value="3">修改绑定手机号</Option>
                    <Option value="4">修改密码</Option>
                    <Option value="5">重置密码</Option>
                    <Option value="6">工作流消息</Option>
                    <Option value="7">管理员消息</Option>
                    <Option value="8">审核通过</Option>
                    <Option value="9">审核失败</Option>
                  </Select>
                </FormItem>
                <FormItem label="模版CODE" prop="templateCode">
                  <Input type="text" v-model="sms.templateCode" placeholder="请输入场景对应短信模版CODE，例如SMS_123456789"
                    style="width: 380px" />
                </FormItem>
                <FormItem>
                  <Button type="primary" style="width: 100px;" :loading="saveLoading" @click="saveEditSms">保存更改</Button>
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName=='email'">
            <div class="setting-title">邮箱配置</div>
            <div style="display:flex;position:relative">
              <Form ref="emailForm" :model="email" :label-width="110" label-position="left" :rules="emailValidate">
                <FormItem label="邮箱服务器" prop="host">
                  <Input type="text" v-model="email.host" placeholder="请输入邮箱服务器Host，例如QQ邮箱为smtp.qq.com"
                    style="width: 380px" />
                </FormItem>
                <FormItem label="发送邮箱账号" prop="username">
                  <Input type="text" v-model="email.username" placeholder="请输入发送者Email账号" style="width: 380px" />
                </FormItem>
                <FormItem label="邮箱授权码" prop="password">
                  <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                    <Input class="input-see" type="text" v-model="email.password" :readonly="!changedEmailPass"
                      @on-click="seeSecret('EMAIL_SETTING')" icon="ios-eye" placeholder="请输入邮箱授权码，进入邮箱-设置中可找到"
                      style="width: 380px" />
                  </Tooltip>
                </FormItem>
                <FormItem>
                  <Button type="primary" style="width: 100px;" :loading="saveLoading"
                    @click="saveEditEmail">保存更改</Button>
                </FormItem>
              </Form>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName=='vaptcha'">
            <div class="setting-title">Vaptcha验证码配置</div>
            <div style="display:flex;position:relative">
              <Form ref="vaptchaForm" :model="vaptcha" :label-width="110" label-position="left"
                :rules="vaptchaValidate">
                <FormItem label="VID" prop="vid">
                  <Input type="text" v-model="vaptcha.vid" placeholder="请输入验证单元VID" style="width: 380px" />
                </FormItem>
                <FormItem label="secretKey" prop="secretKey">
                  <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                    <Input class="input-see" type="text" v-model="vaptcha.secretKey" :readonly="!changedVaptchaSK"
                      @on-click="seeSecret('VAPTCHA_SETTING')" icon="ios-eye" placeholder="请输入验证单元Key"
                      style="width: 380px" />
                  </Tooltip>
                </FormItem>
                <FormItem>
                  <Button type="primary" style="width: 100px;" :loading="saveLoading"
                    @click="saveEditVaptcha">保存更改</Button>
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName=='notice'">
            <div class="setting-title">
              系统公告配置
              <Tooltip content="访问系统公告，右上角弹出" placement="right">
                <Icon type="md-help-circle" size="20" color="#c5c5c5" style="margin-left:10px;cursor:pointer;" />
              </Tooltip>
            </div>
            <div style="display:flex;">
              <Form ref="noticeForm" :model="notice" :label-width="110" label-position="left">
                <FormItem label="公告开关" prop="open">
                  <i-switch v-model="notice.open">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
                <FormItem label="展示时长" prop="duration">
                  <Tooltip trigger="hover" placement="right" content="设为0不自动关闭">
                    <InputNumber :max="1000" :min="0" v-model="notice.duration"></InputNumber> 秒
                  </Tooltip>
                </FormItem>
                <FormItem label="展示页面" prop="position">
                  <Select v-model="notice.position" placeholder="请选择" style="width: 380px">
                    <Option value="LOGIN">登录页（访问系统时）</Option>
                    <Option value="HOME">首页（登录系统后）</Option>
                  </Select>
                </FormItem>
                <FormItem label="公告标题" prop="title">
                  <Input v-model="notice.title" style="width: 380px" />
                </FormItem>
                <FormItem label="公告内容" prop="content">
                  <Input type="textarea" v-model="notice.content" :rows="4" placeholder="" style="width: 380px" />
                </FormItem>
                <FormItem>
                  <Button type="primary" style="width: 100px;" :loading="saveLoading"
                    @click="saveEditNotice">保存更改</Button>
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName=='other'">
            <div class="setting-title">其他配置</div>
            <div style="display:flex;">
              <Form ref="otherForm" :model="other" :label-width="110" label-position="left" :rules="otherValidate">
                <FormItem label="应用部署域名" prop="domain">
                  <Tooltip placement="right" content="拼接部分资源访问链接使用">
                    <Input type="text" v-model="other.domain" placeholder="请输入应用部署域名前缀，如http://xboot.exrick.cn"
                      style="width: 380px" />
                  </Tooltip>
                </FormItem>
                <FormItem label="单点登录域名" prop="ssoDomain">
                  <Tooltip max-width="250" transfer placement="right" content="该域名及子域名下将可获得单点登录所需数据">
                    <Input type="text" v-model="other.ssoDomain" placeholder="请输入应用部署一级域名，如exrick.cn"
                      style="width: 380px" />
                  </Tooltip>
                </FormItem>
                <FormItem label="IP黑名单" prop="blacklist">
                  <Input type="textarea" v-model="other.blacklist" :rows="4" placeholder="多个以回车分隔"
                    style="width: 380px" />
                </FormItem>
                <FormItem>
                  <Button type="primary" style="width: 100px;" :loading="saveLoading"
                    @click="saveEditOther">保存更改</Button>
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
        </Content>
      </Layout>
    </Card>
  </div>
</template>

<script>
  import {
    seeSecretSet,
    checkOssSet,
    getOssSet,
    editOssSet,
    getSmsSet,
    editSmsSet,
    getSmsTemplateCode,
    getEmailSet,
    editEmailSet,
    getVaptchaSet,
    editVaptchaSet,
    getOtherSet,
    editOtherSet,
    getNoticeSet,
    editNoticeSet,
    getDictDataByType
  } from "@/api/index";
  export default {
    name: "setting-manage",
    data() {
      return {
        currName: "oss",
        loading: false, // 表单加载状态
        changeLoading: false,
        saveLoading: false,
        oss: {
          serviceName: "",
          accessKey: "",
          secretKey: "",
          endpoint: "",
          bucket: ""
        },
        changedOssSK: false, // 是否修改oss的secrectKey
        sms: {
          serviceName: "ALI_SMS",
          accessKey: "",
          secretKey: "",
          signName: "",
          type: "",
          templateCode: ""
        },
        changedSmsSK: false, // 是否修改短信的secrectKey
        email: {
          host: "",
          username: "",
          password: ""
        },
        changedEmailPass: false, // 是否修改邮件密码
        errorMsg: "",
        errorMsg2: "",
        vaptcha: {
          vID: "",
          secretKey: ""
        },
        changedVaptchaSK: false, // 是否修改Vaptcha的secrectKey
        notice: {
          duration: 10
        },
        other: {
          domain: "http://127.0.0.1:8888",
          ssoDomain: "",
          blacklist: ""
        },
        ossValidate: {
          // 表单验证规则
          serviceName: [{
            required: true,
            message: "请选择",
            trigger: "blur"
          }],
          accessKey: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          secretKey: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          endpoint: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          bucket: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }]
        },
        smsValidate: {
          // 表单验证规则
          serviceName: [{
            required: true,
            message: "请选择",
            trigger: "blur"
          }],
          accessKey: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          secretKey: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          signName: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          templateCode: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }]
        },
        emailValidate: {
          // 表单验证规则
          host: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          username: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }]
        },
        vaptchaValidate: {
          // 表单验证规则
          vID: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
          secretKey: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }]
        },
        otherValidate: {
          // 表单验证规则
          domain: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }]
        },
        endpointPH: "请输入空间访问域名",
        dictBucketRegions: []
      };
    },
    methods: {
      init() {
        this.initOssSet();
        this.initSmsSet();
        this.initEmailSet();
        this.initVaptchaSet();
        this.initNoticeSet();
        this.initOtherSet();
        this.getDictBucketRegions();
      },
      getDictBucketRegions() {
        getDictDataByType("tencent_bucket_region").then(res => {
          if (res.success) {
            this.dictBucketRegions = res.result;
          }
        });
      },
      initOssSet() {
        this.loading = true;
        checkOssSet().then(res => {
          if (res.success && res.result) {
            let oss = res.result;
            getOssSet(oss).then(res => {
              this.loading = false;
              if (res.result) {
                // 转换null为""
                for (let attr in res.result) {
                  if (res.result[attr] == null) {
                    res.result[attr] = "";
                  }
                }
                this.oss = res.result;
              } else {
                this.changedOssSK = true;
              }
            });
          } else {
            this.loading = false;
            this.changedOssSK = true;
          }
        });
      },
      changeOss(v) {
        if (v == "ALI_OSS") {
          this.endpointPH = "请输入EndPoint(地域节点) 非Bucket域名";
        } else if (v == "TENCENT_OSS") {
          this.endpointPH =
            "请输入完整请求域名";
        } else {
          this.endpointPH = "请输入空间访问域名";
        }
        this.changeLoading = true;
        getOssSet(v).then(res => {
          this.changeLoading = false;
          if (res.result) {
            // 转换null为""
            for (let attr in res.result) {
              if (res.result[attr] == null) {
                res.result[attr] = "";
              }
            }
            this.oss = res.result;
            this.changedOssSK = false;
          } else {
            this.oss = {
              serviceName: v
            };
            if (this.oss.serviceName == "LOCAL_OSS") {
              this.oss.http = "http://";
              this.oss.endpoint = "127.0.0.1:9999/xboot/file/view";
            }
            this.changedOssSK = true;
          }
        });
      },
      initSmsSet() {
        this.loading = true;
        getSmsSet(this.sms.serviceName).then(res => {
          this.loading = false;
          if (res.result) {
            // 转换null为""
            for (let attr in res.result) {
              if (res.result[attr] == null) {
                res.result[attr] = "";
              }
            }
            this.sms = res.result;
            this.sms.type = "0";
            this.changeSmsType(this.sms.type);
          } else {
            this.changedSmsSK = true;
          }
        });
      },
      changeSmsType(v) {
        getSmsTemplateCode(v).then(res => {
          if (res.success) {
            this.sms.templateCode = res.result;
          }
        });
      },
      initEmailSet() {
        this.loading = true;
        getEmailSet().then(res => {
          this.loading = false;
          if (res.result) {
            // 转换null为""
            for (let attr in res.result) {
              if (res.result[attr] == null) {
                res.result[attr] = "";
              }
            }
            this.email = res.result;
          } else {
            this.changedEmailPass = true;
          }
        });
      },
      initVaptchaSet() {
        this.loading = true;
        getVaptchaSet().then(res => {
          this.loading = false;
          if (res.result) {
            // 转换null为""
            for (let attr in res.result) {
              if (res.result[attr] == null) {
                res.result[attr] = "";
              }
            }
            this.vaptcha = res.result;
          } else {
            this.changedVaptchaSK = true;
          }
        });
      },
      initOtherSet() {
        this.loading = true;
        getOtherSet().then(res => {
          this.loading = false;
          if (res.result) {
            // 转换null为""
            for (let attr in res.result) {
              if (res.result[attr] == null) {
                res.result[attr] = "";
              }
            }
            this.other = res.result;
          }
        });
      },
      initNoticeSet() {
        this.loading = true;
        getNoticeSet().then(res => {
          this.loading = false;
          if (res.result) {
            // 转换null为""
            for (let attr in res.result) {
              if (res.result[attr] == null) {
                res.result[attr] = "";
              }
            }
            this.notice = res.result;
          }
        });
      },
      seeSecret(name) {
        if (!name) {
          return;
        }
        seeSecretSet(name).then(res => {
          if (res.success) {
            if (this.currName == "oss") {
              this.oss.secretKey = res.result;
              this.changedOssSK = true;
            } else if (this.currName == "sms") {
              this.sms.secretKey = res.result;
              this.changedSmsSK = true;
            } else if (this.currName == "email") {
              this.email.password = res.result;
              this.changedEmailPass = true;
            } else if (this.currName == "vaptcha") {
              this.vaptcha.secretKey = res.result;
              this.changedVaptchaSK = true;
            }
          }
        });
      },
      saveEditOss() {
        if (this.oss.serviceName == "LOCAL_OSS") {
          if (!this.oss.http) {
            this.errorMsg = "请选择http协议";
            return;
          } else {
            this.errorMsg = "";
          }
          if (!this.oss.endpoint) {
            this.errorMsg = "请输入文件预览接口";
            return;
          } else {
            this.errorMsg = "";
          }
          if (!this.oss.filePath) {
            this.errorMsg2 = "请输入存储磁盘路径";
            return;
          } else {
            this.errorMsg2 = "";
          }
          editOssSet(this.oss).then(res => {
            this.saveLoading = false;
            if (res.success) {
              this.$Message.success("保存成功");
            }
          });
        } else {
          this.$refs.ossForm.validate(valid => {
            if (valid) {
              if (!this.oss.http) {
                this.errorMsg = "请选择http协议";
                return;
              } else {
                this.errorMsg = "";
              }
              this.saveLoading = true;
              this.oss.changed = this.changedOssSK;
              editOssSet(this.oss).then(res => {
                this.saveLoading = false;
                if (res.success) {
                  this.$Message.success("保存成功");
                }
              });
            }
          });
        }
      },
      saveEditSms() {
        this.$refs.smsForm.validate(valid => {
          if (valid) {
            this.saveLoading = true;
            this.sms.changed = this.changedSmsSK;
            editSmsSet(this.sms).then(res => {
              this.saveLoading = false;
              if (res.success) {
                this.$Message.success("保存成功");
              }
            });
          }
        });
      },
      saveEditEmail() {
        this.$refs.emailForm.validate(valid => {
          if (valid) {
            this.saveLoading = true;
            this.email.changed = this.changedEmailPass;
            editEmailSet(this.email).then(res => {
              this.saveLoading = false;
              if (res.success) {
                this.$Message.success("保存成功");
              }
            });
          }
        });
      },
      saveEditVaptcha() {
        this.$refs.vaptchaForm.validate(valid => {
          if (valid) {
            this.saveLoading = true;
            this.vaptcha.changed = this.changedVaptchaSK;
            editVaptchaSet(this.vaptcha).then(res => {
              this.saveLoading = false;
              if (res.success) {
                this.$Message.success("保存成功");
              }
            });
          }
        });
      },
      saveEditOther() {
        this.$refs.otherForm.validate(valid => {
          if (valid) {
            this.saveLoading = true;
            editOtherSet(this.other).then(res => {
              this.saveLoading = false;
              if (res.success) {
                this.$Message.success("保存成功");
              }
            });
          }
        });
      },
      saveEditNotice() {
        this.saveLoading = true;
        let str = JSON.stringify(this.notice);
        let params = JSON.parse(str);
        if (!this.notice.duration) {
          params.duration = 0;
        }
        editNoticeSet(params).then(res => {
          this.saveLoading = false;
          if (res.success) {
            this.$Message.success("保存成功");
          }
        });
      }
    },
    mounted() {
      let name = this.$route.query.name;
      if (name) {
        this.currName = name;
      }
      this.init();
    }
  };
</script>